<template>
	<view class="container">
		<view class="title">
			设置你的头像和昵称
		</view>
		<view class="tip">
			他们将展示给ta，让他知道来自你的心意
		</view>
		<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData" label-width="140rpx">
			<uni-forms-item label="头像:" required name="name">
				<uni-file-picker limit="1" v-model="customFormData.name" @select='choseImg'></uni-file-picker>
				<!-- <uni-easyinput v-model="customFormData.name" placeholder="请输入联系人姓名" /> -->
			</uni-forms-item>
			<uni-forms-item label="昵称:" required name="age">
				<uni-easyinput v-model="customFormData.age" placeholder="请输入昵称" />
			</uni-forms-item>

			<uni-forms-item label="姓名:" required name="name">
				<uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="手机号:" required name="age">
				<uni-easyinput v-model="customFormData.age" placeholder="请输入手机号" />
			</uni-forms-item>
		</uni-forms>
		<view class="submit">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				localData: [],
				customFormData: {
					name: '',
					age: '',
					hobby: []
				},
				customRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					age: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}]
					},
					hobby: {
						rules: [{
								format: 'array'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.length < 2) {
										callback('请至少勾选两个兴趣爱好')
									}
									return true
								}
							}
						]
					}

				},
			};
		},
		methods: {
			choseImg(e) {
				console.log(e, '~~~~');
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 610rpx;
		height: 659rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 24rpx auto;
		padding: 50rpx 35rpx;
		padding-bottom: 0;

		.title {
			font-family: Source Han Sans SC;
			font-weight: 500;
			font-size: 48rpx;
			color: #333333;
			line-height: 55rpx;
			margin-bottom: 20rpx;
		}

		.tip {

			font-family: Source Han Sans SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #CBCDCF;
			line-height: 100rpx;
		}
	}

	.btn {
		display: flex;

		button {
			background: #FFFFFF;
			border-radius: 18rpx;
			border: 1px solid #333333;
			text-align: center;
			margin: 0;
			// padding: 14rpx 20rpx;
		}

		.active {
			background: #5A2F83;
			color: white;
		}

		.right {
			margin-left: 24rpx;
		}
	}

	.submit {
		position: fixed;
		bottom: 30rpx;
		width: 613rpx;
		height: 95rpx;
		background: #5A2F83;
		border-radius: 10rpx;
		margin: auto;
		text-align: center;
		line-height: 95rpx;
		color: white;
	}
</style>